<template>
  <div class="register">
    <LoginNavBar/>

    <div class="logo">
      <img src="@/assets/images/logo.jpg" alt="">
    </div>

    <div class="container">
      <div class="title">
        <h2 >{{t('Welcome')}}</h2>
        <p >{{t('Sign up for your account')}}</p>
      </div>

      <div class="form-container">
        <p class="email">{{t('name')}}</p>
        <van-field v-model="form.email" :border="false"  label="" type="text" :placeholder="t('Email')">
          <template #left-icon>
            <img src="@/assets/images/user.svg" alt="" class="user_img">
          </template>
        </van-field>
        <p class="email">Password</p>
        <van-field v-model="form.password" :border="false"  label="" :type="showPassword?'text':'password'" :placeholder="t('Password')">
          <template #left-icon>
            <img src="@/assets/images/password.svg" alt="" class="user_img">
          </template>
          <template #right-icon>
            <img v-if="showPassword" src="@/assets/images/showEye.png" alt="" class="password_eye" @click="showPassword = false">
            <img v-else src="@/assets/images/noShowEye.png" alt="" class="password_eye" @click="showPassword = true">
          </template>
        </van-field>
        <p class="email">{{t('Confirm Password')}}</p>
        <van-field v-model="form.password2" :border="false"  label="" :type="showpassword2?'text':'password'" :placeholder="t('Confirm Password')">
          <template #left-icon>
            <img src="@/assets/images/password.svg" alt="" class="user_img">
          </template>
          <template #right-icon>
            <img v-if="showpassword2" src="@/assets/images/showEye.png" alt="" class="password_eye" @click="showpassword2 = false">
            <img v-else src="@/assets/images/noShowEye.png" alt="" class="password_eye" @click="showpassword2 = true">
          </template>
        </van-field>
        <p class="email">{{t('Organization Code')}}</p>
        <van-field v-model="form.code" :border="false"  label="" type="text" :placeholder="t('Organization Code')">
          <template #left-icon>
            <img src="@/assets/images/registration.svg" alt="" class="user_img">
          </template>
        </van-field>

        <div class="btn-container" @click="handleRegister">{{t('Register')}}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import LoginNavBar from '@/components/LoginNavBar.vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
import {showToast, showLoadingToast, showSuccessToast } from 'vant'
import { t } from '@/languages'
const form = reactive({
  email: '',
  password: '',
  password2: '',
  code: '123456'
})

const $router = useRouter()

const showPassword = ref(false)
const showpassword2 = ref(false)

async function handleRegister() {
  const { email, password, password2, code } = form

  if (!email || !password || !password2 || !code) {
    return showToast(t('Cannot be empty'))
  }

  if (password !== password2) {
    return showToast(t('Password must be the same'))
  }

  try {
    showLoadingToast({
      duration: 0
    })
    const res = await post(`/api/app/register/`, form)
    console.log(res)
    $router.push('/login')
    showSuccessToast(t('Login success'))
  } catch (error) {
    console.log(error)
  }
}


</script>
<style lang="scss" scoped>
.register {
  min-height: 100vh;
  background: url(@/assets/images/Register_bg.1af4fe09.png);
  background-size: 100% 100%;
}

.register .logo {
  padding: 0 .8rem;
  display: flex;
  justify-content: center;
}

.register .logo img {
  height: 2.4rem;
}

.register .container {
  margin: 0 .26667rem;
  margin-top: .66667rem;
  padding-bottom: .53333rem;
  padding: 0 .8rem;
}

.register .container .title {
  color: #fff;
  margin-left: .26667rem;
  margin-bottom: .8rem;
}

.register .container .title p {
  font-size: .32rem;
}

.register .container .form-container {
  padding: 0 .26667rem;
}


.register .container .form-container .email {
  margin-top: .53333rem;
  color: #fff;
  font-size: .37333rem;
  padding-left: .13333rem;
}

.register .container .form-container .user_img {
  width: .66667rem;
}

.register .container .form-container .van-field {
  line-height: 1.17333rem;
  height: .93333rem;
  padding: 0 .26667rem;
  margin-top: .13333rem;
  border-radius: .66667rem;
  border: .02667rem solid #2b4e5a;
  background: #0d111a;
}

.register .container .form-container .van-field :deep(.van-field__left-icon) {
  display: flex;
  align-items: center;
  height: 100%;
}


.register .container .form-container :deep(.van-field__body),
.register .container .form-container :deep(.van-field__control) {
  padding-left: .13333rem;
  height: 100%;
  color: #fff;
}

.register .container {
  :deep(.van-field__control) {
    color: #fff;
    @include setPlaceholder(#666);
  }

  :deep(.van-field__value) {
    height: 100%;
  }

  :deep(.van-field__right-icon) {
    display: flex;
    align-items: center;
    height: 100%;
  }
}


.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.2rem;
  font-weight: 600;
  margin-top: .8rem;
  color: #0c101a;
  border-radius: .13333rem;
  border: .02667rem solid #325d79;
  background: linear-gradient(90deg, #62f792, #63fddb);
}

.password_eye {
  width: .42667rem;
  height: .42667rem;
}
</style>
